<template>
  <div class="app-container">
    <div class="custom_card_0">
      <el-form :inline="true">
        <el-form-item label="品牌/车系/车型" prop="modelName">
          <el-input
            v-model="modelName"
            placeholder="请输入品牌/车系/车型"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="loading" :data="list" border>
      <el-table-column
        label="车型信息"
        prop="modelInfo"
        align="center"
        min-width="180"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="用车时间类型"
        prop="useTimeType"
        align="center"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.use_time_type"
            :value="scope.row.useTimeType"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="租金"
        prop="rent"
        align="center"
        min-width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="押金"
        prop="deposit"
        align="center"
        min-width="120"
        show-overflow-tooltip
      ></el-table-column>
<!--      <el-table-column-->
<!--        label="均价"-->
<!--        prop="averagePrice"-->
<!--        align="center"-->
<!--        min-width="120"-->
<!--        show-overflow-tooltip-->
<!--      ></el-table-column>-->
<!--      <el-table-column-->
<!--        label="库存/辆"-->
<!--        prop="carNum"-->
<!--        align="center"-->
<!--        min-width="120"-->
<!--        show-overflow-tooltip-->
<!--      ></el-table-column>-->
      <el-table-column
        label="操作"
        align="center"
        fixed="left"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }"  ><!--v-if="row.carNum>0"-->
          <el-button type="text" @click="checked(row)" >选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getData"
    />
  </div>
</template>

<script>
import {classificationMoldelList} from "@/api/charteredBus/add.js";
import Template from "@/views/system/template/index.vue";

export default {
  components: {Template},
  props: ['storeId', 'useTimeType'],
  dicts: ['use_time_type'],
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      pageNum: 1, //页码   必选
      pageSize: 5, //每页显示数据 必选
      nowChecked: null, // 当前选择
      modelName:null,
    }
  },
  computed: {
    formData() {
      const formData = {
        storeId: this.storeId, //预定取车门店  必传
        // startTime: this.startTime, //租赁开始时间 必传
        // endTime: this.endTime, //租赁结束时间 必传
        pageNum: this.pageNum, //页码   必选
        pageSize: this.pageSize, //每页显示数据 必选
        modelName: this.modelName,
        useTimeType: this.useTimeType,
        // orderNo: this.orderNo,
      }
      return formData
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.formData.modelName=this.modelName
      this.formData.pageNum = 1
      this.getData()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.formData.modelName=null;
      this.modelName=null;
      this.handleQuery()
    },
    getData() {
      this.loading = true
      classificationMoldelList(this.formData).then((res) => {
        this.list = res.rows || []
        this.total = res.total || 0
        this.loading = false
      })
    },
    /** 选择车型 */
    async checked(row) {
      this.nowChecked = row
      this.$emit('checked', row)
    },
  },
}
</script>
